<script setup>
	import {ref, reactive} from 'vue'

	const blockArr = ref([])

	// 设置参数
	const params = reactive({
		// 速度 ms
		speed: 800,
		// 得分
		score: 0,
		// 是否结束
		isOver: false
	})

	let intervalId = null
	run()

	// 初始化
	function run() {
		params.score = 0
		addBlock()
	}

	// 随机新增一条数据 里面只有一个1 时间间隔 params.speed
	function addBlock() {
		intervalId = setInterval(() => {
			const newBlock = Array(5).fill(0);
			newBlock[Math.floor(Math.random() * 5)] = 1
			// 前面增加到数组最前面
			blockArr.value.unshift(newBlock)
			// 边界 溢出 删除 最后一条数据
			if (blockArr.value.length > 7) {
				blockArr.value.pop()
			}
		}, params.speed)
	}

	// 点击
	const clickBlock = (it, blockIndex, index) => {
		// 判断是否点击正确
		if (it === 1) {
			params.score++
			// 将这条数据里面的1 变成 2
			blockArr.value[blockIndex][index] = 2
		} else {
			if (it === 2) return
			// 游戏结束  不在生成
			params.isOver = true
			clearInterval(intervalId)
			ElMessage.error('游戏结束')
		}
	}

	// 弹窗
</script>

<template>
	<div class="tc mt10">别踩白块</div>
	<div class="tc mt10">{{ params.score }}</div>
	<main>
		<!--容器-->
		<div class="container  p10 pt50">
			<div v-for="(item,blockIndex) in blockArr" class="flex" :key="blockIndex">
				<div :class="['block flex1', it === 1 ? 'black' : '' , it === 2 ? 'gray' : '']"
					 v-for="(it,index) in item"
					 :key="index" @click="clickBlock(it,blockIndex,index)">
				</div>
			</div>
		</div>
	</main>
</template>

<style scoped lang="scss">

	main {
		width: 392px;
		height: 600px;
		position: relative;
		margin: 10px auto;
		background: url("../../../assets/mobile.png") no-repeat;
		background-size: cover;
	}

	.container {
		overflow: hidden;
	}

	.block {
		height: 80px;

		&:not(:last-child) {
			border-right: 1px solid black;
		}
	}

	.black {
		background: black;
	}

	.gray {
		background: #ccc;
	}


</style>